<template>
  <NstdBizTable
          :isSelectFlag="true"
          :isShowPage="true"
          :isSequenceFlag="true"
          :paginationAttrs="paginationAttrs"
          :data="tableData"
          :columns="columns"
          @pageChange="pageChange">
  </NstdBizTable>
</template>

<script lang="jsx" setup>
import { ref } from "vue";
// paginationAttrs 对应 NstdPagination属性配置项
const paginationAttrs = ref({
  total: 50,
  pageNum: 1, // pageNum 对应 NstdPagination的current-page属性
  pageSize: 10 // pageSize 对应 NstdPagination的page-size属性
})
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
  },
  {
    date: '2016-05-02',
    name: 'Tom'
  },
  {
    date: '2016-05-04',
    name: 'Tom'
  },
  {
    date: '2016-05-01',
    name: 'Tom'
  },
])
const columns = ref([
  {
    label: 'Date',
    prop: 'date'
  },
  {
    label: 'Name',
    prop: 'name',
    render: (h, {row, prop}) => {
      return (<NstdInput v-model={row[prop]}></NstdInput>)
    }
  },
  {
    label: '操作',
    render: (h, {column, row, $index, prop, scope}) => {
      return (<div>
        <NstdButton text type="primary">编辑</NstdButton>
        <NstdButton text type="danger">删除</NstdButton>
      </div>)
    }
  }
])
function pageChange(item) {}
</script>
<style>
  .vp-doc ul, .vp-doc ol{
    list-style: none;
    margin: 0;
    padding: 0;
  }
</style>
